<template>
	<view class="home-page">
		<view class="home-page_floor padding-md margin-md border-radius-md">
			<view class="home-page_floor-title">欢迎我的小宝宝降临。他已经出生{{ birthday_total }}天，他的矫正年龄是{{ birthday_age }}天。</view>
		</view>
		<view class="home-page_floor padding-md margin-md border-radius-md">
			<view class="home-page_floor-title">今日数据</view>
			<uv-line></uv-line>
			<uv-grid :border="false" style="margin: 20rpx 0">
				<uv-grid-item v-for="(item, index) in daysTotals" :key="index">
					<view class="data_grid-item margin-sm font-size-xs">
						<view class="data_grid-item_num">
							<text class="font-size-lg">{{ item.num }}</text>
							<text>{{ item.unit }}</text>
						</view>
						<view class="font-size-sm">{{ item.title }}</view>
					</view>
				</uv-grid-item>
			</uv-grid>
		</view>
	</view>
</template>

<script lang="ts" setup>
import dayjs from '@/utils/dayjs'
import { todayStatistic } from '@/api';
import { ref } from 'vue';

interface StatisticItem {
	title: string;
	key: string;
	num: number;
	unit: string;
	name: string;
}

var daysTotals = ref<StatisticItem[]>([
	{ title: '吃奶奶总量', name: "吃奶奶", key: 'total', num: 0, unit: 'ml' },
	{ title: '最高吃奶量', name: "吃奶奶", key: 'max', num: 0, unit: 'ml' },
	{ title: '最低吃奶量', name: "吃奶奶", key: 'min', num: 0, unit: 'ml' },
	{ title: '拔奶奶总量', name: "拔奶奶", key: 'total', num: 0, unit: 'ml' },
	{ title: '吃奶奶次数', name: "吃奶奶", key: 'count', num: 0, unit: '次' },
	{ title: '拉臭臭次数', name: "拉粑粑", key: 'count', num: 0, unit: '次' },
	{ title: '撒尿尿次数', name: "撒尿尿", key: 'count', num: 0, unit: '次' },
	{ title: '拔奶奶次数', name: "拔奶奶", key: 'count', num: 0, unit: '次' },
	{ title: '体重', name: "量身高", key: 'max', num: 0, unit: 'kg' },
	{ title: '身高', name: "称体重", key: 'max', num: 0, unit: 'cm' }
])

const birthday = dayjs('2024-11-23'); // 出生日期
const birthday_total = dayjs().diff(birthday, 'day'); // 已出生x天
const birthday_age = Number(birthday_total) - (40 * 7 - (29 * 7 + 2));

async function getTodayStatistic() {
	const result: any = await todayStatistic();
	daysTotals.value.forEach((item: StatisticItem) => {
		const resultItem = result.data.find((resItem: any) => item.name == resItem.title);
		if (resultItem) {
			item.num = resultItem[item.key];
		}

	});
}

getTodayStatistic();


</script>

<style lang="scss" scoped>
.home-page {
	&_floor {
		background-color: #ffffff;

		&-title {
			padding: 30rpx 0rpx;
		}
	}

	.data_grid-item {
		width: 100%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&_num {
			margin-bottom: 10rpx;
		}
	}
}
</style>
